﻿@{
    Layout = null;
}
@model MvcApplication2.Models.TestModels
@StackExchange.Profiling.MiniProfiler.RenderIncludes()
<!DOCTYPE html >

<html ng-app="myapp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TestView</title>
    <script language="javascript" src="../../Scripts/angular.js"></script>
    <script language="javascript" src="../../Scripts/jquery-1.8.2.js"></script>
   @* <script language="javascript" src="../../Scripts/bootstrap.js"></script>*@
    <link rel="stylesheet" href="../../Content/css/bootstrap.css"> 
    <link rel="stylesheet" href="../../Content/css/templatemo_style.css"> 

    
    <script  type="text/javascript">

        var par = {
            init: function ($scope, $http) {
                $http.get("/Home/Getuser").success(function (response) {
                    $scope.Users = response;
                });
                $scope.orderBy = "Id";
            },
            login: function () {
                $.ajax({
                    type: "POST",
                    url: "/Home/Login",
                    data: $('#login').serialize(),
                    error: function (request) {
                        alert(request);
                    },
                    success: function (data) {
                        alert(data.Result);
                    }
                });
            },
            model: angular.module('myapp', []),
            
            
        };
        
        par.model.controller('myctl', function ($scope, $http) {
            $scope.style = {color:'red' };
            par.init($scope, $http);
            $scope.remove = function(index) {
                //下面这一行会被当成参数附加到URL后面，所以post请求最终会变成Home/Remove/?id=  
                var config = { params: { id: index.Id } };
                $http.post('Home/Remove',"", config
                ).success(function(data) {
                    par.init($scope, $http);
                }).error(function(data) {
                    alert(data);
                });
            };
            $scope.Login = function() {
                par.login();
            };

        });
    </script>
</head>
    <body   ng-controller="myctl">
        <form id="login" name="login"  >
            <div>
                Search:<input ng-model="query"/>
            </div>
            <select ng-model="orderprop">
                <option value="Name">name</option>
                <option value="Id">Id</option>
            </select>
            <ul>
                <li ng-repeat="user in Users | filter:query |  orderBy:orderprop">
                    {{user.Name}}
                    <p>{{user.Id}}</p>
                    <button class="btn-info" ng-click="remove(user)">remove</button>
                </li>
            </ul>
            <div ng-style="style">测试</div>
            <input type="checkbox" name="a" ng-model="a" ng-true-value="AA" ng-false-value="BB" />
            <div class="container">
            <div class="col-md-12">
                <h1 class="margin-bottom-15">Login Form One</h1>
                <form class="form-horizontal templatemo-container templatemo-login-form-1 margin-bottom-30" role="form" action="#" method="post">				
                    <div class="form-group">
                        <div class="col-xs-12">		            
                            <div class="control-wrapper">
                                <label for="username" class="control-label fa-label"><i class="fa fa-user fa-medium"></i></label>
                                <input type="text" class="form-control" id="username" name="username" placeholder="Username">
                            </div>		            	            
                        </div>              
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <div class="control-wrapper">
                                <label for="password" class="control-label fa-label"><i class="fa fa-lock fa-medium"></i></label>
                                <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <div class="checkbox control-wrapper">
                                <label>
                                    <input type="checkbox"> Remember me
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <div class="control-wrapper">
                                <input type="button" value="Log in" class="btn btn-info" ng-click="Login()">
		          		 
                            </div>
                        </div>
                    </div>
                    <hr>
		       
                </form>
                <div class="text-center">
                    <a href="create-account.html" class="templatemo-create-new">Create new account <i class="fa fa-arrow-circle-o-right"></i></a>	
                </div>
            </div>
        </div>
        </form>
    </body>
</html>
